<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({
    pageBgColor: {
        type: String, 
        default: '#F2F3F5' 
    },
    footerBtnTitle: { 
        type: String, 
        default: '返回首页' 
    },
    footerUrl: {
        type: String, 
        default: '/pages/index/index' 
    }, 
    footerBtnColor:{
        type: String, 
        default: '#ffffff'
    },
    footerBtnBg: {
        type: String,
        default: '#171717'
    },
    footerBtnIcon: {
        type: Boolean,
        default: false
    }
});

// const emits = defineEmits(['update:modelValue', 'onChange']);
const footerBtnClick = () => {
    my.navigateTo({ url: props.footerUrl });
}
</script>

<template>
    <view class="page-template" :style="{ background: pageBgColor }">
        <view class="main">
            <slot></slot>
        </view>
        <view class="footer">
            <view class="guarantee">
                <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/guarantee.png" mode="aspectFill"></image>
            </view>
		    <u-button :custom-style="{ background: footerBtnBg, color: footerBtnColor }" class="footer-btn" @click="footerBtnClick">
                {{ footerBtnTitle }}<u-icon v-if="footerBtnIcon" style="margin-left: 6rpx;" :bold="true" name="arrow-right-double" :size="22" :color="footerBtnColor"></u-icon>
            </u-button>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.page-template {   
    padding: 0 20rpx;
    position:absolute; 
    left:0;
    right:0;
    top:0;
    bottom:0; 
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    .main{
        flex:1;
    }
    .footer{
        flex-shrink: 0;
        width: 100%;
        height: 460rpx;
        .guarantee{
            margin-bottom: 20rpx;
            width: 100%;
            height: 310rpx;
            image{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        &-btn{
            height: 100rpx;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 34rpx;
            border-radius: 20rpx;
        }
    }
}
</style>
